<template>
  <div ref="echartsRef" class="chart">gamePlay</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watchEffect } from "vue"
import echarts from "@/utils/chart"
const echartsRef = ref()
let myChart = null

const props = defineProps(['data']);

echarts.env.touchEventsSupported = false;
echarts.env.wxa = false;

// 指定图表的配置项和数据
const option = {
	tooltip: {
		trigger: 'axis',
		confine: true,
	},
	grid: {
		left: 50,
		top: 10,
		bottom: 60,
		right: 10
	},
	legend: {
		data: ['w', 'y', 'x', 'z'],
		top: 'bottom'
	},
	xAxis: {
		data: [],
		min: 0,
		max: 150,
	},
	yAxis: {
		type:'value',
		min: -36000,
		max: 36000,
		splitNumber: 3,
	},
	series: []
}

onMounted(() => {
	myChart = echarts.init(echartsRef.value)
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
})

watchEffect(() => {
	if (option && props?.data[0]?.length) {
		const firstArr = props.data[0]
		const arr = []
		const legend = option.legend.data
		option.xAxis.data = firstArr.map((v, i) => i + 1)
		props.data.forEach((v, i) => {
			arr.push({
				name: legend[i],
				type: "line",
				data: v,
				symbol: 'none',
			})
		})
		option.series = arr
		
		myChart && myChart.setOption(option)
	}
	
})
</script>

<style lang="scss" scoped>
	.chart {
		width: 100%;
		height: 400rpx;
		margin-bottom: 30rpx;
	}
</style>